<script setup lang='ts'>
import { ref } from 'vue'

import MeasurePointTable from '@/components/global/MeasurePointTable.vue'
import MaintenanceDialog from '@/components/global/MaintenanceDialog.vue'
import RepairDialog from '@/components/global/RepairDialog.vue'

// 定义变量
// refs
const maintenanceDialogRef = ref()
const repairDialogRef = ref()

const deviceType = ref('臂悬回转电机')

// 显示一号箱
const gearbox = ref(1)

// 定义函数
const showDialog = (num:number) => {
  if(num) {
    repairDialogRef.value.dialogVisible = true
  } else {
    maintenanceDialogRef.value.dialogVisible = true
  }
}

// 选择减速箱
const selectGreaBox = (num:number) => {
  gearbox.value = num
}
</script>

<template>
  <div class="belt-motor-main-box">
    <div class="model-info">
      <div
        v-if="gearbox === 1"
        class="model-img1"
      />
      <div
        v-else
        class="model-img2"
      />
      <div class="btn-box">
        <div
          class="custom-button"
          @click="showDialog(0)"
        >
          保养记录
        </div>
        <div
          class="custom-button"
          @click="showDialog(1)"
        >
          维修记录
        </div>
      </div>
    </div>
    <div class="select-grarbox-box">
      <div
        :id="(gearbox === 2) ? 'activegearbox' : ''"
        class="custom-button"
        @click="selectGreaBox(2)"
      >
        臂悬回转电机2
      </div>
      <div
        :id="(gearbox === 1) ? 'activegearbox' : ''"
        class="custom-button"
        style="margin-left: 15px;"
        @click="selectGreaBox(1)"
      >
        臂悬回转电机1
      </div>
    </div>
    <div class="table-box">
      <MeasurePointTable :device-type="deviceType" />
    </div>
    <div>
      <MaintenanceDialog
        ref="maintenanceDialogRef"
        :device-type="180"
      />
      <RepairDialog
        ref="repairDialogRef"
        :device-type="180"
      />
    </div>
  </div>
</template>

<style scoped lang=scss>
.belt-motor-main-box {
  width: 100%;
  height: 100%;
  background-color: #fff;

  /* border: 1px solid red; */

  .model-info {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 60%;

    /* border: 1px solid green; */

    .model-img1 {
      width: 70%;
      height: 100%;
      background-image: url("../../../assets/imgs/RotaryMotor1.png");
      background-size: 100% 100%;

      /* border: 1px solid yellow; */
    }

    .model-img2 {
      width: 70%;
      height: 100%;
      background-image: url("../../../assets/imgs/RotaryMotor2.png");
      background-size: 100% 100%;

      /* border: 1px solid yellow; */
    }

    .btn-box {
      width: 10%;
      height: 10%;
      padding-top: 20px;

      >div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 98px;
        height: 40px;
        margin-top: 10px;
        font-size: 16px;
      }
    }
  }

  .select-grarbox-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;

    /* border: 1px solid red; */

    >div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 147px;
      height: 100%;
    }
  }

  .table-box {
    height: 32%;
    margin-top: 10px;
    padding: 0 24px;

    /* border: 1px solid red; */
  }
}
</style>